@extends('layouts.back_stage')
@section('content')
    <link href="{{env('CDN_DOMAIN_NAME')}}/store/commoncss/simplePagination.css" rel="stylesheet">
    <style>
        .scan_qr,.serach_girard,.serach_code{width:200px;display: inline-block;}
        @-webkit-keyframes flash {
            0% {
                background-color: #F5F5F7;
                color:#676A6E;
            }
            50% {
                background-color: #1aad1a;
                color:#fff;
            }
            100% {
                background-color: #F5F5F7;
                color:#676A6E;
            }
        }
        .flash {
            -webkit-animation-name: flash;
            -webkit-animation-duration: 1500ms;
            -webkit-animation-iteration-count: 3;
            -webkit-animation-timing-function: ease-in-out;
        }
    </style>
    <div class="container">
        <audio id="music_success" src="{{env('CDN_DOMAIN_NAME')}}/store/mp3/success.mp3" type="audio/mp3"></audio>
        <audio id="music_faile" src="{{env('CDN_DOMAIN_NAME')}}/store/mp3/faile.mp3" type="audio/mp3"></audio>
        <div style="padding:20px 0;"><h3 class="statusH3" abc="{{$status}}">退货详情</h3>
        </div>
        <div style="float: right">
            <button class="btn btn-info successDistribution" onclick="submiInit()" abc="{{$id}}">完成退货</button>
            <form action="/picking/franchise-export" method="get" style="float: right;margin-left: 20px;">
                <input type="hidden" name="id" value="{{$id}}" >
                <button type="submit" class="btn btn-info successPrint">导出</button>
            </form>
        </div>
        <div class="search_box saoMiao" style="margin-bottom: 10px;">
            <label>扫描条码：</label>
            <input type="text " class="form-control scan_qr" placeholder="请扫描条码">
        </div>
        <div class="search_box">
            <label>搜索款号：</label>
            <input type="text " class="form-control serach_girard" placeholder="请输入款号" id="">
            <input type="text " class="form-control serach_code" placeholder="请输入服装编号" id="">
            <button class="btn btn-success serach">搜索</button>
            <button class="btn btn-info" onclick="reSetSearch()">重置</button>
        </div>
        <!--startprint-->
        <p class="comment_sp">备注：{{ $remark }}</p>
        <p>总计：<span class="sum_count">{{ $scan_count }}</span>件</p>
        <h3 class="table-sum-text">汇总</h3>
        <table class="table table-hover table-sum">
            <thead>
            <tr>
                <th class="col-sm-1">序号</th>
                <th class="col-sm-1">款号</th>
                <th class="col-sm-1">颜色</th>
                <th class="col-sm-1">数量</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
        <h3 class="table-info-text">详情</h3>
        <table class="table table-hover table-info tableInfos">
            <thead>
            <tr>
                <th class="col-sm-1">品牌</th>
                <th class="col-sm-1">款号</th>
                <th class="col-sm-1">服装编号</th>
                <th class="col-sm-1">颜色</th>
                <th class="col-sm-1">尺码</th>
                <th class="col-sm-1">价格(元)</th>
                <th class="col-sm-1">操作</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <div id="paging1" class="page" style=""></div>
        <!--endprint-->
    </div>
    <script src="{{ env('CDN_DOMAIN_NAME') }}/store/commonjs/jquery.simplePagination.js?v0.0.3"></script>
    <script>
        var skip = 0;
        /*扫码*/
        $(".scan_qr").on("input",function(){
            var small_qr = $('.scan_qr').val().trim();
            var id=$(".successDistribution").attr("abc");
            if(small_qr.length !=15){
                $(".faceImg").attr("src","/img/weep.png");
                $(".oHandle").text("条码长度不是15位");
                $(".oSuccess").show(0).delay(1000).hide(0);
                return false;
            }
            $('.scan_qr').val('');
            if (small_qr != '') {
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                    },
                    type: 'post',
                    url: '/picking/franchise-scan-qrcode',
                    data: {
                        id:id,
                        small_qr:small_qr
                    },
                    success: function (data) {
                        if(data.result.success){
                            var sumOption = '';
                            var sumCount = 1;
                            $.each(data.content.group_count, function (idx, obj) {
                                let colorInfo = '';
                                for (var i = 0; i < obj.info.length; i++) {
                                    colorInfo += obj.info[i].color + " " + obj.info[i].nums + "件 "
                                }
                                sumOption += '<tr>' +
                                    '<td>' + (sumCount++) + '</td>' +
                                    '<td>' + obj.girard + '</td>' +
                                    '<td>' + colorInfo + '</td>' +
                                    '<td>' + obj.total + '件</td>' +
                                    '</tr>'
                            });
                            var infoOption='<tr class="tr_count del'+data.content.qrcode.id+'">' +
                                    '<td>' + data.content.qrcode.brand_name + '</td>' +
                                    '<td>' + data.content.qrcode.girard + '</td>' +
                                    '<td>' + data.content.qrcode.small_qr + '</td>' +
                                    '<td>' + data.content.qrcode.color + '</td>' +
                                    '<td>' + data.content.qrcode.size + '</td>' +
                                    '<td>' + data.content.qrcode.price + '</td>' +
                                    '<td><button abc="' + data.content.qrcode.id + '" class="btn btn-info get-remove">删除</button></td>' +
                                    '</tr>';
                            $('.table-sum tbody').html(sumOption);
                            $('.tableInfos tbody').prepend(infoOption);
                            var m=Number( $('.sum_count').text() )+1;
                            $('.sum_count').text(m);

                            $(".del"+data.content.qrcode.id).addClass('flash');
                            setTimeout(function(){
                                $(".del"+data.content.qrcode.id).removeClass('flash');
                            },3000);
                            $("#paging1").pagination({
                                items: m,
                                itemsOnPage: 10,
                                cssStyle: 'light-theme',
                                currentPage:1
                            });
                            var music = document.getElementById("music_success");
                            music.play()
                            $(".faceImg").attr("src","/img/laugh.png");
                            $(".oHandle").text("扫码成功");
                            $(".oSuccess").show(0).delay(500).hide(0);
                        }else{
                            var music = document.getElementById("music_faile");
                            music.play()
                            $(".faceImg").attr("src","/img/weep.png");
                            $(".oHandle").text(data.result.errorMsg);
                            $(".oSuccess").show(0).delay(1000).hide(0);
                        }
                    }
                })
            }
        });
        /*刚进页面*/
        $(document).ready(function () {
            var status=$(".statusH3").attr("abc");
            if(status==1){
                $(".saoMiao").show();
                $(".successDistribution").show();
            }else if(status==2){
                $(".saoMiao").hide();
                $(".successDistribution").hide();
            }
            fenPage();
        });
        /*完成退货*/
        function submiInit(){
            var id=$(".successDistribution").attr("abc");
            $(".oText").text("确认完成退货？");
            $(".oMask").show();
            $(".oAnim").show();
            $(".oBtn0").attr("abc",id);
            $(".oBtn0").attr('id','');
            $(".oBtn0").attr('id','sureOver');
        }
        /*点确定*/
        $(document).on('click','#sureOver',function(){
            $(".oMask").hide();
            $(".oAnim").hide();
            var id=$(this).attr("abc");
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                },
                type: 'post',
                url: '/picking/franchise-complete',
                data: {
                    id:id,
                },
                success: function (data) {
                    if(data.result.success){
                        $(".faceImg").attr("src","/img/laugh.png");
                        $(".oHandle").text("退货成功");
                        $(".oSuccess").show(0).delay(800).hide(0);
                        setTimeout(function(){
                            window.location.href='/picking/return-franchise-lists';
                        },800);
                    }else{
                        $(".faceImg").attr("src","/img/weep.png");
                        $(".oHandle").text(data.result.errorMsg);
                        $(".oSuccess").show(0).delay(1000).hide(0);
                    }
                }
            })
        });
        /*删除编码*/
        $(document).on("click",".get-remove",function(){
            var id=$(this).attr("abc");
            $(".oText").text("确认删除？");
            $(".oMask").show();
            $(".oAnim").show();
            $(".oBtn0").attr("abc",id);
            $(".oBtn0").attr('id','');
            $(".oBtn0").attr('id','sureOdel');
        });
        /*点确定*/
        $(document).on('click','#sureOdel',function(){
            $(".oMask").hide();
            $(".oAnim").hide();
            var id=$(this).attr("abc");
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                },
                type: 'post',
                url: '/picking/delete-return-small_qr',
                data: {
                    id:id,
                },
                success: function (data) {
                    if(data.result.success){
                        var m=Number( $('.sum_count').text() )-1;
                        $('.sum_count').text(m);
                        skip = 0;
                        fenPage();
                        $(".faceImg").attr("src","/img/laugh.png");
                        $(".oHandle").text("删除成功");
                        $(".oSuccess").show(0).delay(800).hide(0);
                    }else{
                        $(".faceImg").attr("src","/img/weep.png");
                        $(".oHandle").text(data.result.errorMsg);
                        $(".oSuccess").show(0).delay(1000).hide(0);
                    }
                }
            })
        });
        /*重置*/
        function reSetSearch() {
            $('.serach_girard').val("");
            $('.serach_code').val("");
            skip = 0;
            fenPage();
        }
        /*搜索*/
        $('.serach').click(function () {
            skip=0;
            fenPage();
        });
        /*点击分页*/
        $(document).on('click','.page-link',function(){
            if($(this).attr('class') === "page-link next nextPage"){
                if($(this).parent().attr('class') == 'active'){
                    return false;
                }else{
                    fenPage();
                }
            }else if($(this).attr('class') === "page-link prev prevPage"){
                if($(this).parent().attr('class') == 'active'){
                    return false;
                }else{
                    skip=Number(skip)-2;
                    fenPage();
                }
            }else if($(this).attr('class') === "page-link tcdNumber"){
                skip=Number($(this).text())-1;
                fenPage();
            }
        });
        /*分页*/
        function fenPage(){
            var id=$(".successDistribution").attr("abc");
            var girard = $('.serach_girard').val().trim();
            var small_qr = $('.serach_code').val().trim();
            var status=$(".statusH3").attr("abc");
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                },
                type: 'post',
                url: '/picking/scan-qrcode-infos',
                data: {
                    skip:skip,
                    id:id,
                    girard:girard,
                    small_qr:small_qr,
                },
                success: function (data) {
                    if(data.result.success){
                        var sumOption = '';
                        var infoOption='';
                        var sumCount = 1;
                        $.each(data.content.girard_info, function (idx, obj) {
                            let colorInfo = '';
                            for (var i = 0; i < obj.info.length; i++) {
                                colorInfo += obj.info[i].color + " " + obj.info[i].nums + "件 "
                            }
                            sumOption += '<tr>' +
                                '<td>' + (sumCount++) + '</td>' +
                                '<td>' + obj.girard + '</td>' +
                                '<td>' + colorInfo + '</td>' +
                                '<td>' + obj.total + '件</td>' +
                                '</tr>'
                        });
                        if(status==1){
                            for(var i in data.content.data){
                                infoOption+='<tr class="del'+data.content.data[i].id+'">' +
                                    '<td>' + data.content.data[i].brand_name + '</td>' +
                                    '<td>' + data.content.data[i].girard + '</td>' +
                                    '<td>' + data.content.data[i].small_qr + '</td>' +
                                    '<td>' + data.content.data[i].color + '</td>' +
                                    '<td>' + data.content.data[i].size + '</td>' +
                                    '<td>' + data.content.data[i].price + '</td>' +
                                    '<td><button abc="' + data.content.data[i].id + '" class="btn btn-info get-remove">删除</button></td>' +
                                    '</tr>';
                            }
                        }else if(status==2){
                            for(var i in data.content.data){
                                infoOption+='<tr class="del'+data.content.data[i].id+'">' +
                                    '<td>' + data.content.data[i].brand_name + '</td>' +
                                    '<td>' + data.content.data[i].girard + '</td>' +
                                    '<td>' + data.content.data[i].small_qr + '</td>' +
                                    '<td>' + data.content.data[i].color + '</td>' +
                                    '<td>' + data.content.data[i].size + '</td>' +
                                    '<td>' + data.content.data[i].price + '</td>' +
                                    '<td>-</td>' +
                                    '</tr>';
                            }
                        }
                        skip = data.content.skip;
                        $("#paging1").pagination({
                            items: data.content.count,
                            itemsOnPage: 10,
                            cssStyle: 'light-theme',
                            currentPage:data.content.skip
                        });
                        $('.table-sum tbody').html(sumOption);
                        $('.tableInfos tbody').html(infoOption);
                    }else{
                        $(".faceImg").attr("src","/img/weep.png");
                        $(".oHandle").text(data.result.errorMsg);
                        $(".oSuccess").show(0).delay(1000).hide(0);
                    }
                }
            })
        }
    </script>
@endsection